

import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';
import SettingItem from './components/SettingItem';
import SuccessToast from './components/SuccessToast';

interface NotificationSettings {
  appNotification: boolean;
  systemNotification: boolean;
  smsNotification: boolean;
  pendingNotification: boolean;
  resultNotification: boolean;
  reminderNotification: boolean;
  overtimeNotification: boolean;
}

const NotificationSettingsScreen = () => {
  const router = useRouter();
  
  const [notificationSettings, setNotificationSettings] = useState<NotificationSettings>({
    appNotification: true,
    systemNotification: true,
    smsNotification: false,
    pendingNotification: true,
    resultNotification: true,
    reminderNotification: true,
    overtimeNotification: true,
  });
  
  const [isSuccessToastVisible, setIsSuccessToastVisible] = useState(false);

  const handleBackPress = () => {
    if (router.canGoBack()) {
      router.back();
    }
  };

  const showSuccessToast = () => {
    setIsSuccessToastVisible(true);
    setTimeout(() => {
      setIsSuccessToastVisible(false);
    }, 2000);
  };

  const handleSettingChange = (key: keyof NotificationSettings) => {
    setNotificationSettings(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
    showSuccessToast();
  };

  const notificationMethodsData = [
    {
      id: 'appNotification',
      icon: 'bell',
      iconColor: '#969FFF',
      title: '应用内消息通知',
      description: '在应用内显示通知消息',
      value: notificationSettings.appNotification,
      onToggle: () => handleSettingChange('appNotification'),
    },
    {
      id: 'systemNotification',
      icon: 'mobile-screen',
      iconColor: '#3B82F6',
      title: '手机系统通知',
      description: '通过系统通知栏推送',
      value: notificationSettings.systemNotification,
      onToggle: () => handleSettingChange('systemNotification'),
    },
    {
      id: 'smsNotification',
      icon: 'comment-sms',
      iconColor: '#10B981',
      title: '短信通知',
      description: '重要通知通过短信发送',
      value: notificationSettings.smsNotification,
      onToggle: () => handleSettingChange('smsNotification'),
      isLast: true,
    },
  ];

  const notificationTypesData = [
    {
      id: 'pendingNotification',
      icon: 'clock',
      iconColor: '#F59E0B',
      title: '待办通知',
      description: '有新的待审批任务时通知',
      value: notificationSettings.pendingNotification,
      onToggle: () => handleSettingChange('pendingNotification'),
    },
    {
      id: 'resultNotification',
      icon: 'circle-check',
      iconColor: '#8B5CF6',
      title: '审批结果通知',
      description: '我发起的审批有结果时通知',
      value: notificationSettings.resultNotification,
      onToggle: () => handleSettingChange('resultNotification'),
    },
    {
      id: 'reminderNotification',
      icon: 'triangle-exclamation',
      iconColor: '#EF4444',
      title: '催办通知',
      description: '收到催办请求时通知',
      value: notificationSettings.reminderNotification,
      onToggle: () => handleSettingChange('reminderNotification'),
    },
    {
      id: 'overtimeNotification',
      icon: 'clock',
      iconColor: '#EAB308',
      title: '超时提醒',
      description: '审批即将超时或已超时提醒',
      value: notificationSettings.overtimeNotification,
      onToggle: () => handleSettingChange('overtimeNotification'),
      isLast: true,
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton} 
          onPress={handleBackPress}
          activeOpacity={0.7}
        >
          <FontAwesome6 name="arrow-left" size={18} color="#1F2937" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>通知设置</Text>
        <View style={styles.headerPlaceholder} />
      </View>

      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        <View style={styles.content}>
          {/* 通知方式设置 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>通知方式</Text>
            <View style={styles.card}>
              {notificationMethodsData.map((item) => (
                <SettingItem key={item.id} {...item} />
              ))}
            </View>
          </View>

          {/* 通知类型设置 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>通知类型</Text>
            <View style={styles.card}>
              {notificationTypesData.map((item) => (
                <SettingItem key={item.id} {...item} />
              ))}
            </View>
          </View>

          {/* 提示信息 */}
          <View style={styles.tipContainer}>
            <View style={styles.tipContent}>
              <FontAwesome6 name="circle-info" size={16} color="#3B82F6" style={styles.tipIcon} />
              <View style={styles.tipTextContainer}>
                <Text style={styles.tipTitle}>温馨提示</Text>
                <Text style={styles.tipDescription}>
                  为了确保您能及时处理审批任务，建议开启多种通知方式。您可以根据个人偏好自定义通知设置。
                </Text>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>

      {/* 成功提示弹窗 */}
      <SuccessToast visible={isSuccessToastVisible} />
    </SafeAreaView>
  );
};

export default NotificationSettingsScreen;

